<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Adding a second object</title>
<link href="css/tutorial.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="css/precodeformat.js"></script>
</head>

<body onload="PreCodeFormat()">
<div id="content">
<h1>Adding a second object</h1>

<p>
The default project produced by Spritely doesn't do much, but it is a good
starting point for creating your own games.

In order to make it interesting, you'll probably want to draw more sprites
and (more importantly) modify the source code to make the game do what
you want.
</p>

<p>
This tutorial will show you how to add a second object to your project
and show it on the screen.
</p>

<p class="alert">
This tutorial has been tested with
<a href="http://www.devkitpro.org">devkitARM release 26</a>
and <a href="http://code.google.com/p/spritely">Spritely version 0.19.20 beta</a>
and verified to work for both GBA and NDS projects.
</p>

<h2>Step 1 : Create player sprite</h2>

<p>
To begin, let's create a simple sprite for the player
</p>


<p><img src="second_object/player.png" /></p>

<h2>Step 2 : Export</h2>


<p>
Export your project (into <tt>c:\gamedev\projects\mygame</tt>) and then
open up the newly-created <tt>.pnproj</tt> file to launch
Programmer's Notepad.
</p>

<h2>Step 3 : Find object definitions</h2>

<p>
Find the following code in <tt>game_state.h</tt>:
</p>

<p class="filename"><code><b>game_state.h</b></code>&nbsp;&nbsp;&mdash;&nbsp;&nbsp;Lines 14 - 16:</p>
<pre class="code">
// The objects in our game.
// Only 128 objects (0-127) can be defined at any time.
<mark type="arrow"/>const int kObj_Player = 0;
</pre>

<p>
The Gameboy (and DS) allows 128 objects on the screen at a time.
This code is assigning the player object to object #0.
</p>

<p>
We could simply use <tt>0</tt> in the code instead of <tt>kObj_Player</tt>,
but as we add more objects we're likely to forget which
numbers correspond to which objects. By using a description name like
<tt>kObj_Player</tt>, we're less likely to get confused.
</p>

<h2>Step 4 : Add definiton for second object</h2>

<p>
Let's add a definition for a second object. For lack of a clever name,
we'll just call this one "New" (<tt>kObj_New</tt>).
</p>

<p class="filename"><code><b>game_state.h</b></code>&nbsp;&nbsp;&mdash;&nbsp;&nbsp;Lines 14 - 17:</p>
<pre class="code">
<disabled/>// The objects in our game.
<disabled/>// Only 128 objects (0-127) can be defined at any time.
<disabled/>const int kObj_Player = 0;
<mark type="plus"/>const int kObj_New = 1;
</pre>

<p>
As with the player object, we'll be using this descriptive name instead
of <tt>1</tt> in the code.
</p>

<p>
Since the GBA allows 128 objects (numbered 0 through 127), we could have
chosen any number from 0-127 (well, except for 0 since that's taken by the 
player object).
</p>

<h2>Step 5 : Initialize the new object</h2>

<p>
Now open up <tt>game_state.cpp</tt>.
Scroll down until you find the following lines: 
</p>

<p class="filename"><code><b>game_state.cpp</b></code>&nbsp;&nbsp;&mdash;&nbsp;&nbsp;Lines 48 - 54:</p>
<pre class="code">
	// Initialize the objects for the first level.
<mark type="arrow"/>	InitObject(kObj_Player, 0);

	// Set the initial location of each object.
	_xPlayer = 0;
	_yPlayer = 0;
<mark type="arrow"/>	MoveObjectTo(kObj_Player, _xPlayer, _yPlayer);
</pre>

</p>
This is the code that places the player object on the screen.

If we add a second line like this one, we can create a second object.
However, we need to make sure that we don't create our new object on top of our
existing object (the player).
</p>

<p>
Modify the code as follows:
</p>

<p class="filename"><code><b>game_state.cpp</b></code>&nbsp;&nbsp;&mdash;&nbsp;&nbsp;Lines 48 - 56:</p>
<pre class="code">
	<disabled/>// Initialize the objects for the first level.
	<disabled/>InitObject(kObj_Player, 0);
<mark type="plus"/>	InitObject(kObj_New, 0);
	<disabled/>
	<disabled/>// Set the initial location of each object.
	<disabled/>_xPlayer = 0;
	<disabled/>_yPlayer = 0;
	<disabled/>MoveObjectTo(kObj_Player, _xPlayer, _yPlayer);
<mark type="plus"/>	MoveObjectTo(kObj_New, 50, 50);
</pre>

<p>
Note that we're giving different information to the second InitObject() call.
We're telling it that we're initializing the <tt>kObj_New</tt>
object with sprite #0 and we're placing it at screen location (50,50).
</p>

<h2>Step 6 : Build/Run</h2>

<p>
Compile and run your code and you should see a second object near the
middle of the screen.
</p>


<p><img src="second_object/ss_01.png" /></p>

<p>
You can't move the object, and if you move your player around you'll
go right over it.
It also looks exactly the same as the player object.
We'll fix the collision problem in a later tutorial, but we can change
the new object to use a different sprite right now.
</p>

<h2>Step 7 : Draw another sprite</h2>

<p>
To do this, we need to return to Spritely and draw a new sprite.
You can create a new sprite by selecting "New" under the "Sprite"
menu and selecting the desired size.
</p>

<p><img src="second_object/menu_new_sprite.png" /></p>


<p>
For this example, we created a new "4x1 (32x8 pixels) Wide" sprite and drew
a simple bat. For your sprite, you can use whatever size you want.
</p>

<p><img src="second_object/new.png" /></p>

<p>
After you've created your new sprite. You now need to give each of
your sprites a unique name.
</p>

<p>
The name of each sprite is shown immediately under the sprite list.
By default, sprites are given names like "S1" or "S3". You can rename
them by pressing the "Info" button or by selecting the Sprite::Properties...
menu item.
</p>

<p>
Name your player sprite "Player" and name your new object sprite "New".
Again, feel free to give your sprites different names, bearing in mind
that you'll need to use your new sprite names throughout this tutorial.
</p>

<p><img src="second_object/name_player.png" /></p>

<p><img src="second_object/name_new.png" /></p>

<h2>Step 8 : Export updated sprites</h2>

<p>
Now, export your sprites and backgrounds into your project directory.
</p>


<p>
Do not export a "complete project" or else you will overwrite the code
changes that you made earlier.
</p>

<h2>Step 9 : Verify sprite names</h2>

<p>
If you now open up <tt>sprites.h</tt>, you can see how the names
that you gave to your sprites are being used in the code.
</p>

<p>
Scroll down to the bottom of <tt>sprites.h</tt>. You should see the
following code:
</p>

<p class="filename"><code><b>sprites.h</b></code>&nbsp;&nbsp;&mdash;&nbsp;&nbsp;Lines 70 - 72:</p>
<pre class="code">
// Sprite IDs
const int kSprites_Player = 0;
const int kSprites_New = 1;
</pre>

<h2>Step 10 : Initialize object with different sprites</h2>

<p>
Now that we've given the sprites names, we can easily update the
<tt>InitObject()</tt> calls to choose different sprites.
</p>

<p>
Go back to <tt>game_state.cpp</tt> and look at initialization code:
</p>

<p class="filename"><code><b>game_state.cpp</b></code>&nbsp;&nbsp;&mdash;&nbsp;&nbsp;Lines 48 - 50:</p>
<pre class="code">
	// Initialize the objects for the first level.
	InitObject(kObj_Player, 0);
	InitObject(kObj_New, 0);
</pre>

<p>
The second parameter of the InitObject() call is the sprite id that
is used to create the object. Currently, this is set to 0 for both
objects, which means that both objects are using the same sprite
(sprite #0, which happens to be the player sprite in our example).
</p>

<p>
We're going to change this parameter to use a different sprite for
each object.
</p>

<p>
Change this code to the following:
</p>

<p class="filename"><code><b>game_state.cpp</b></code>&nbsp;&nbsp;&mdash;&nbsp;&nbsp;Lines 48 - 50:</p>
<pre class="code">
	<disabled/>// Initialize the objects for the first level.
<mark type="arrow"/>	InitObject(kObj_Player, kSprites_Player);
<mark type="arrow"/>	InitObject(kObj_New, kSprites_New);
</pre>

<p>
Note that the <tt>0</tt> in each line has been changed to use
one of the sprite names that we specified earlier: 
<tt>kSprites_Player</tt> and <tt>kSprite_New</tt>.
</p>

<p>
Compile and run your program and you should see that your new object
is now based on the new sprite.
</p>

<p><img src="second_object/ss_02.png" /></p>


<h2>Finished!</h2>

<p>
You're done.
</p>

<div id="filelink_bkgd"><div id="filelink">
<h1>Links to completed project</h1>
<p>GBA:</p>
<ul>
<li><a href="second_object/gba/game_state.h">game_state.h</a></li>
<li><a href="second_object/gba/game_state.cpp">game_state.cpp</a></li>
<li><a href="second_object/gba/obj2.gba">obj2.gba</a></li>
</ul>
<p>NDS:</p>
<ul>
<li><a href="second_object/nds/game_state.h">game_state.h</a></li>
<li><a href="second_object/nds/game_state.cpp">game_state.cpp</a></li>
<li><a href="second_object/nds/obj2.nds">obj2.nds</a></li>
</ul>
</div></div>

<div id="footer_bkgd"><div id="footer">
<p>Copyright &copy;2008-9 Gary Kacmarcik</p>
</div></div>

</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1163903-2");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>
</html>
